var chart = null;
$(function () {
	// left-bottom
	$('.boxButtomImgW').highcharts({
		chart: {
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false,
			backgroundColor: 'rgba(0,0,0,0)'
		},
		title: {
			text: ''
		},
		credits: {
			enabled: false
		},
		tooltip: {
			headerFormat: '{series.name}<br>',
			pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',

				dataLabels: {
					enabled: false
				},
				showInLegend: true
			}
		},
		series: [{
			type: 'pie',
			name: '占比',
			color:'#fff',
			data: [
				['未使用',35.0],
				['已使用', 65]
			]
		}]
	});
	// content-top
	$('.boxTopConImgTt').highcharts({
		chart: {
			type: 'column',
			backgroundColor: 'rgba(0,0,0,0)'
		},
		title: {
			text: ''
		},
		credits: {
			 enabled: false
		},
		xAxis: {
			categories: ['2017-01', '2017-02', '2017-03', '2017-04', '2017-05', '2017-06', '2017-07', '2017-08', '2017-09', '2017-10','2017-11','2017-12'],
			labels:{
				style:{ // 此处可设置样式
					fontSize:11,
					color:'#fff',
					fontWeight:'bold',
				}
			}
		},
		yAxis: {
			min: 0,
			title: {
				text: ''
			},
			stackLabels: {
				enabled: true,
				style: {
					fontWeight: 'bold',
					color: (Highcharts.theme && Highcharts.theme.textColor) || '#fff'
				}
			},
			labels:{
				style:{ // 此处可设置样式
					fontSize:11,
					color:'#fff',
					fontWeight:'bold'
				}
			}
		},
		legend: {
			align: 'right',
			x: 0,
			verticalAlign: 'top',
			y:-10,
			floating: true,
			backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#DDDDDD',//
			// borderColor: '#CCC',
			// borderWidth: 1,
			shadow: false
		},
		tooltip: {
			formatter: function () {
				return '<b>' + this.x + '</b><br/>' +
					this.series.name + ': ' + this.y + '<br/>'
					// +
					// '总计: ' + this.point.stackTotal
					;
			}
		},
		plotOptions: {
			column: {
				stacking: 'normal',
				dataLabels: {
					enabled: true,
					color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || '#fff',
					style: {
						textShadow: ''
					}
				}
			}
		},
		series: [{
			name: 'MES系统',
			color:'#00FE38',
			data: [300, 300, 350, 300, 200,200,380,330,130,130,200,200]
		}, {
			name: 'MMS系统',
			color:'#D7120A',
			data: [200, 200, 200, 200, 300,400,150,250,330,330,150,250]
		}, {
			name: 'PDM系统',
			color:'#FFA100',
			data: [200, 200, 300, 200, 100,100,80,150,130,130,100,100]
		}]
	});
	// content-bottom
	var chart = new Highcharts.Chart('boxTopConImgW', {
		chart:{
			backgroundColor: 'rgba(0,0,0,0)'
		},
		title: {
			text: '',
			x: 0
		},
		credits: {
			 enabled: false
		},
		subtitle: {
			text: '',
			x: 0
		},
		xAxis: {
			categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
			labels:{
				style:{ // 此处可设置样式
					fontSize:11,
					color:'#fff',
					fontWeight:'bold'
				}
			}
		},
		yAxis: {
			title: {
				text: ''
			},
			plotLines: [{
				value: 0,
				width: 1,
				color: '#f00'
			}],
			labels:{
				style:{ // 此处可设置样式
					fontSize:11,
					color:'#fff',
					fontWeight:'bold'
				}
			}
		},
		tooltip: {
			valueSuffix: '%'
		},
		legend: {
			layout: 'vertical',
			align: 'right',
			y:-10,
			verticalAlign: 'middle',
			borderWidth:0
		},
		series: [{
			name: 'MES系统单品数据交互统计',
			color:'#00FE38',
			data: [37.0, 20.9, 19.5, 24.5, 38.2, 41.5, 55.2, 46.5, 34.3, 40.3, 23.9, 19.6]
		}, {
			name: 'MMS系统单品数据交互统计',
			color:'#D7120A',
			data: [10.2, 22.8, 35.7, 39.3, 47.0, 52.0, 64.8, 54.1, 30.1, 20.1, 8.6, 2.5]
		}, {
			name: 'PDM系统单品数据交互统计',
			color:'#FFA100',
			data: [15.9, 10.6, 20.5, 21.4, 23.5, 27.0, 30.6, 27.9, 24.3,12.0, 3.9, 1.0]
		}]
	});
	// content-bottom-left
	var chart = Highcharts.chart('boxButtomImgT', {
		chart: {
			backgroundColor: 'rgba(0,0,0,0)'
		},
		title: {
			text: ''
		},
		credits: {
			enabled: false
		},
		subtitle: {
			text: ''
		},
		xAxis: {
			categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
			labels:{
				style:{ // 此处可设置样式
					fontSize:11,
					color:'#fff'
				}
			}
		},
		yAxis: {
			title: {
				text: ''
			},
			labels:{
				style:{ // 此处可设置样式
					fontSize:11,
					color:'#fff'
				}
			}
		},
		series: [{
			type: 'column',
			colorByPoint: true,
			data: [429, 571, 306, 729, 244, 676, 135, 448, 716, 494, 195, 354],
			showInLegend: false
		}]
	});
	$('#plainW').click(function () {
		chart.update({
			chart: {
				inverted: false,
				polar: false
			},
			subtitle: {
				text: ''
			}
		});
	});
	$('#invertedW').click(function () {
		// chart.update 支持全部属性动态更新
		chart.update({
			chart: {
				inverted: true,
				polar: false
			},
			subtitle: {
				text: ''
			}
		});
	});
	$('#polarW').click(function () {
		chart.update({
			chart: {
				inverted: false,
				polar: true
			},
			subtitle: {
				text: ''
			}
		});
	});
	// content-bottom-right
	$('#boxButtomImgS').highcharts({
		chart: {
			zoomType: 'xy',
			backgroundColor: 'rgba(0,0,0,0)'
		},
		title: {
			text: ''
		},
		credits: {
			enabled: false
		},
		subtitle: {
			text: ''
		},
		xAxis: [{
			categories: ['量具', '仪器仪表', '检测、试验设备', '数控刀具', '机械设备'],
			crosshair: true,
			labels:{
				style:{ // 此处可设置样式
					fontSize:11,
					color:'#fff'
				}
			}
		}],
		yAxis: [{ // Primary yAxis
			labels: {
				format: '{value}',
				style: {
					color: Highcharts.getOptions().colors[1],
					fontSize:11,
					color:'#fff'
				}

			},
			title: {
				text: '',
				style: {
					color: Highcharts.getOptions().colors[1],
					fontSize:11,
					color:'#fff'
				}
			}
		}, { // Secondary yAxis
			title: {
				text: '',
				style: {
					color: Highcharts.getOptions().colors[0],
					fontSize:11,
					color:'#fff'
				}
			},
			labels: {
				format: '{value}',
				style: {
					color: Highcharts.getOptions().colors[0],
					fontSize:11,
					color:'#fff'
				}
			},
			opposite: true
		}],
		tooltip: {
			shared: true
		},
		legend: {
			layout: 'vertical',
			align: 'right',
			x: -30,
			verticalAlign: 'center',
			y: -10,
			floating: true,
			backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#ddd',
			borderColor: '#fff',
			borderWidth: 1
		},
		series: [{
			name: '本月',
			type: 'column',
			yAxis: 1,
			color:'#00FE38',
			data: [71, 106, 129, 144,95],
			tooltip: {
				valueSuffix: ''
			}
		}, {
			name: '上月',
			type: 'spline',
			color:'#FF6700',
			data: [17, 36, 58, 39, 24],
			tooltip: {
				valueSuffix: ''
			}
		}]
	});
});
setTimeout(function(){
	$('#iconBox').css({"display":"none"});
},3000);